<!--
 * @Description  : 
 * @Author       : zhao
 * @Date         : 2022-11-02 16:14:16
 * @LastEditors  : zhao
 * @LastEditTime : 2022-11-19 09:01:56
-->

<!--  -->
<template>
	<div class="model" ref="msgForm">
		<div class="guanbi cursor" @click="closure"></div>
		<div class="biaoti">基本信息</div>
		<!-- <p>
			<span>节点编码：</span>
			<span style="color: #4bb0e5" class="cursor ellipsis">{{ select.code }}</span>
		</p>
		<p>
			<span>节点名称：</span>
			<span class="ellipsis">{{ select.name }}</span>
		</p>
		<p>
			<span>位置描述</span>
			<span class="ellipsis">{{ select.address }}</span>
		</p>
		<p>
			<span>节点类型：</span>
			<span class="ellipsis">{{ select.type }}</span>
		</p>
		<p>
			<span>经度：</span>
			<span class="ellipsis">{{ select.longitude }}</span>
		</p>
		<p>
			<span>纬度：</span>
			<span class="ellipsis">{{ select.latitude }}</span>
		</p> -->
		<el-descriptions :column="1" size="mini">
			<el-descriptions-item label="节点编码">
				<a class="title" :title="select.code" style="width: 145px">{{ select.code }}</a>
			</el-descriptions-item>
			<el-descriptions-item label="节点名称">
				<a class="title" :title="select.name" style="width: 110px">{{ select.name }}</a>
			</el-descriptions-item>
			<el-descriptions-item label="节点类型">
				<a class="title" :title="select.type" style="width: 60px">{{ select.type | setType(select) }}</a>
			</el-descriptions-item>
			<el-descriptions-item label="位置描述">
				<a class="title" :title="select.address" style="width: 110px">{{ select.address }}</a>
			</el-descriptions-item>
			<el-descriptions-item label="经度">
				<a class="title" :title="select.longitude" style="width: 110px">{{ select.longitude }}</a>
			</el-descriptions-item>
			<el-descriptions-item label="纬度">
				<a class="title" :title="select.latitude" style="width: 110px">{{ select.latitude }}</a>
			</el-descriptions-item>
		</el-descriptions>
		<div class="corner"></div>
	</div>
</template>

<script>
import Select from 'ol/interaction/Select';
import Overlay from 'ol/Overlay';
import { altKeyOnly, click, pointerMove } from 'ol/events/condition';
import { toStringHDMS } from 'ol/coordinate';
import { Vector } from 'ol/source/Vector';
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style';
import { Feature } from 'ol';
import { Point } from 'ol/geom'; // 点线面
import imgblue from '@/assets/img/yuan_xuanzhong.png';
import imgred from '@/assets/img/yuan_xuanzhong.png';
import { unByKey } from 'ol/Observable';
export default {
	name: '',
	data() {
		return {
			select: {}, //选中数据
			overlayForm: null, //弹窗实例
			selectClick: null,

			feature: null, //选中实例
			dblclick: null,
		};
	},
	props: {
		map: Object,
	},
	components: {},
	filters: {
		setType(value, data) {
			let type = value;
			if (type == 170100) return '三通';
			if (type == 170200) return '拐点';
			if (type == 170300) return '末端';

			if (type == 180100) return '燃气储配站';
			if (type == 180200) return '门站';
			if (type == 180300) return '气化站';
			if (type == 180400) return '混气站';
			if (type == 180500) return '加气站';
			if (type == 180600) return '灌装站';
			if (type == 180700) return '供应站';
			if (type == 180800) return '调压站';
			if (type == 189900) return '其他';

			if (type == 190100) return '阀门井';
			if (type == 190200) return '调压装置';

			// if (!value) return '';
			// if (data.code.substr(0, 2) == '14') {
			// 	if (value == 100) {
			// 		return '三通';
			// 	} else if (value == 200) {
			// 		return '拐点';
			// 	} else if (value == 300) {
			// 		return '末端';
			// 	}
			// }
			// if (data.code.substr(0, 2) == '15') {
			// 	if (value == 100) {
			// 		return '阀门井';
			// 	} else if (value == 200) {
			// 		return '调压装置';
			// 	}
			// }
			// if (data.code.substr(0, 2) == '16') {
			// 	if (value == 100) {
			// 		return '燃气储配站';
			// 	} else if (value == 200) {
			// 		return '门站';
			// 	} else if (value == 300) {
			// 		return '气化站';
			// 	} else if (value == 400) {
			// 		return '混气站';
			// 	} else if (value == 500) {
			// 		return '加气站';
			// 	} else if (value == 600) {
			// 		return '灌装站';
			// 	} else if (value == 700) {
			// 		return '供应站';
			// 	} else if (value == 800) {
			// 		return '调压站';
			// 	} else if (value == 9900) {
			// 		return '其他';
			// 	}
			// }
		},
		setGasType(val) {
			let value = val + '';
			if (!value) return;
			switch (value) {
				case '030100':
					return 天然气;
				case '030101':
					return 管道天然气;
				case '030102':
					return 液化天然气;
				case '030103':
					return 压缩天然气;
				case '030200':
					return 液化石油气;
				case '030300':
					return 人工煤气;
				case '030400':
					return 液化石油气混空气;
				case '030500':
					return 沼气;
				case '030600':
					return 氢气;
			}
		},
		setIsMhi(value) {
			if (value == 1) return '是';
			if (value == 0) return '否';
		},
	},
	computed: {},
	watch: {
		map(val) {
			this.feature_Info();

			// this.setTool()
		},
	},
	mounted() {},

	methods: {
		//地图点击事件 获取选中点信息
		getSelectInfo(value) {
			this.select = value;
			let lonlat = [value.longitude, value.latitude];
			this.overlayForm.setPosition(lonlat);
			
			
		},

		//创建弹出框模块
		feature_Info() {
			this.overlayForm = new Overlay({
				// 创建一个图层
				element: this.$refs.msgForm, // 图层绑定我们上边的弹窗
				autoPan: {
					margin: 70,
				},
				positioning: 'bottom-left',
			});
			this.overlayForm.setPosition(undefined); // 设置弹窗位置，刚开始我们不让他显示，就是undefined就行
			this.map.addOverlay(this.overlayForm);

			// this.map.on('click', () => {
    		// this.overlayForm.setPosition(undefined);
  			// });

  			// this.map.getViewport().addEventListener('blur', () => {
    		// this.overlayForm.setPosition(undefined);
  			// });
		},

		//改变选中点颜色
		setToolred(feature) {
			feature.setStyle(() => {
				return new Style({
					image: new Icon({
						src: imgred,
						opacity: 1,
						scale: '1', // 图片缩放比例
					}),
				});
			});
			feature.changed();
		},

		closure() {
			this.overlayForm.setPosition(undefined);
			unByKey(this.dblclick);
		},

		getType(number) {
			let num = number.substr(0, 2);
			if (num == '14') return '节点';
			if (num == '16') return '厂站';
			if (num == '15') return '附属设施';
		},
	},
};
</script>
<style lang='scss' scoped>
.model {
	width: 230px;
	height: 200px;
	// border: 1px solid rgb(247, 169, 169);
	position: absolute;
	z-index: 111;
	// top: -200px;
	// left: 0px;
	background: white;
	padding: 10px;
	margin: 0;
	box-shadow: rgb(0 0 0 / 50%) 0px 1px 5px;
	border-radius: 15px;
	position: relative;
	cursor: default;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		width: 0 !important;
	}
	p {
		display: block;
		height: 25px;
		line-height: 25px;
		width: 100%;
		margin: 0;
		margin-bottom: 10px;
		display: flex;
		justify-content: stretch;
		font: 0.259rem Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma, Arial, sans-serif;

		span:last-child {
			display: inline-block;
			width: 320px;
		}

		span:first-child {
			font-size: 0.28rem;
		}
	}
	&:after {
		border-top-color: white;
		border-width: 10px;
		left: 48px;
		margin-left: -10px;
	}
	.guanbi {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 20px;
		top: 15px;
		font-size: 0.3rem;
		color: #409eff;
		background: url('../../../assets/img/guanbi.png') no-repeat;
		background-size: 100% 100%;

		&:hover {
			color: #409eff;
		}
	}

	.el-descriptions {
	}

	.title {
		display: inline-block;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.biaoti {
		padding: 5px;
		text-align: center;
		font-weight: 600;
	}
}
</style>